//编辑菜单页面
import React, { useState, useEffect } from 'react'
import { Button, Divider, Input, Row, Col, Select, notification, Tooltip } from 'antd'
import useStore from '../../../components/useStore'
import { useLocation } from 'react-router'
import request from '../../../untils/request'
import { InfoOutlined } from '@ant-design/icons'

const EditMenuForm = () => { //新增/修改菜单
    const { collapsed } = useStore();
    const [menuInfo, setmenuInfo] = useState({ //更改的菜单信息
        menu: { //菜单自身
            title: "",
            path: "",
            id: 0
        },
        parentMenu: { //父级菜单信息
            title: "",
            path: "",
            id: 0
        }
    })
    const [firstMenus, setfirstMenus] = useState([])
    
    const location = useLocation();

    useEffect(() => { //获取该菜单的所有信息
        const queryParams = new URLSearchParams(location.search);
        var id = parseInt(queryParams.get('id')); // 获取 id 参数
        request("/admin/menu/getMenuInfoById", {
            method: "POST",
            mode: 'cors',
            body: {
                id: id
            }
        }).then(data => {
            if (data.code == 200) {
                setmenuInfo(data.data)
            } else {
                notification.error({
                    message: data.msg
                })
            }
        })
        getFirstMenu()
    }, [])

    const getTitle = (e) => { //获取菜单名称
        setmenuInfo({
            ...menuInfo,
            menu: {
                ...menuInfo.menu,
                title: e.target.value
            }
        })
    }

    const getPath = (e) => { //获取菜单路径
        setmenuInfo({
            ...menuInfo,
            menu: {
                ...menuInfo.menu,
                path: e.target.value
            }
        })
    }

    const getFirstMenu = () => { //获取可选的父级菜单
        request("/admin/menu/selectFirstMenus", {
            mode: 'cors'
        }).then(data => {
            for (var i = 0; i < data.length; i++) {
                data[i] = {
                    value: data[i].id,
                    label: data[i].title
                }
            }
            if (data.length != 0) { //不为0时，添加一个空白选项
                data.push({
                    value: null,
                    label: "（无 - 作为一级菜单）"
                })
            }
            setfirstMenus(data)
        });
    }

    const getParentMenu = (e) => { //重新选过父级菜单
        setmenuInfo({
            ...menuInfo,
            parentMenu: {
                ...menuInfo.parentMenu,
                id: e
            }
        })
    }

    const saveChange = () => { //保存修改
        request("/admin/menu/edit", {
            method: 'POST',
            mode: 'cors',
            body: {
                menu: menuInfo.menu,
                parentMenu: menuInfo.parentMenu
            }
        }).then(data => {
            if (data.code == 200) {
                notification.success({
                    message: data.msg
                })
            } else {
                notification.error({
                    message: data.msg
                })
            }
        })
    }

    return (
        <div style={{
            height: "calc(100% - 4vh)",
            backgroundColor: `#F1F1F1`,
            right: "1%",
            top: "4vh",
            overflow: "hidden",
            width: collapsed ? "94%" : "84%",
            position: "absolute",
            color: "white",
            fontSize: "0.8rem"
        }}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem",
                    width: "96%",
                    margin: "0 auto",
                    padding: "1rem 0",
                    display: "flex",
                    flexDirection: "column",
                    gap: "1rem"
                }}>
                    <Tooltip 
                        title="以下所填写的内容均有长度限制！且新增的自定义菜单不得挂靠于系统内置菜单上。"
                        placement="top"
                    >
                        <div style={styles.infoText}>
                            <text style={{ fontSize: "larger" }}>以下所填写的内容均有长度限制！且新增的自定义菜单不得挂靠于系统内置菜单上。</text>
                            <InfoOutlined style={{ marginLeft: 8, color: '#1890ff' }} />
                        </div>
                    </Tooltip>
                    
                    <Divider />
                    
                    <Row gutter={24} style={{ width: '100%' }}>
                        <Col span={12}>
                            <div style={styles.formItem}>
                                <text><text style={{ color: "red" }}>*</text>菜单名称</text>
                                <Input 
                                    onChange={getTitle} 
                                    value={menuInfo.menu.title} 
                                    showCount 
                                    maxLength={20} 
                                    placeholder="请输入菜单名称"
                                    style={styles.input}
                                />
                            </div>
                        </Col>
                        <Col span={12}>
                            <div style={styles.formItem}>
                                <text><text style={{ color: "red" }}>*</text>菜单路径</text>
                                <Input 
                                    onChange={getPath} 
                                    value={menuInfo.menu.path} 
                                    showCount 
                                    maxLength={50} 
                                    placeholder="请输入菜单路径"
                                    style={styles.input}
                                />
                                <div style={styles.helpText}>
                                    菜单路径需为字符/与英文字母组成。
                                </div>
                            </div>
                        </Col>
                    </Row>
                    
                    <Row gutter={24} style={{ width: '100%' }}>
                        <Col span={12}>
                            <div style={styles.formItem}>
                                <text>父级菜单（当前系统仅支持两级菜单）</text>
                                <Select 
                                    onChange={getParentMenu} 
                                    value={menuInfo.parentMenu?.id ?? null}
                                    placeholder="不选则表示当前为一级菜单" 
                                    onClick={getFirstMenu} 
                                    style={styles.select}
                                    options={firstMenus}
                                />
                            </div>
                        </Col>
                        <Col span={12}></Col>
                    </Row>
                    
                    <Divider />
                    
                    <div style={styles.buttonContainer}>
                        <Button onClick={saveChange} type="primary">保存修改</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default EditMenuForm

const styles = {
    kshcontainer: {
        width: "98%",
        height: "95%",
        margin: "1% auto",
        backgroundColor: "white",
        color: "black",
        borderRadius: "10px",
        overflow: "auto",
        padding: "1rem 0"
    },
    infoText: {
        display: "flex",
        alignItems: "center",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        paddingRight: "1rem"
    },
    formItem: {
        display: "flex",
        flexDirection: "column",
        gap: "0.5rem"
    },
    input: {
        width: "100%",
        minWidth: "200px"
    },
    select: {
        width: "100%",
        minWidth: "200px"
    },
    helpText: {
        fontSize: "0.8rem",
        color: "#666",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis"
    },
    buttonContainer: {
        marginTop: "1rem",
        display: "flex",
        justifyContent: "flex-start"
    }
}
